<template>
  <div class="hello">
    <h1 style="text-align:center">{{ msg }}</h1>
    <a-tabs default-active-key="2" style="text-align:center">
      <a-tab-pane key="1" tab="更新">
        <div class="mainc">
          <p>2021年3月8日：</p>
          <ul>
            <li>v0.0.1版本发布，实现大部分介绍中的内容</li>
            <li>自动更新功能尚在开发中</li>
          </ul>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="介绍">
        <div class="mainc">
          <p>
            基于electron和vue的框架其实已经很多了，但是都过于陈旧，大部分也没有集成UI框架进来。以前有个别项目植入的element
            ui，已经停止更新。所以干脆自己做一个采用大部分当下（2021年初）的稳定且不那么滞后的组件建立一个新的项目模板。
            经过很久时间的考量，阿里的Ant Design框架是国内最优秀之一，衍生出来的Ant-design-vue也是最优秀的Vue UI框架，所以在这里选择他们来实现跨平台桌面应用开发的底层框架，感谢相关开发者的工作~
          </p>
          <p>
            主要功能：
          </p>
          <p>
            <ul>
              <li>集成electron v11.3.0, Vue v2.6.12, Ant-design-vue v1.7.4</li>
              <li>使用electron-updater的自动更新服务</li>
              <li>theme的dark模式切换及状态保持</li>
              <li>提供程序相关win和macOS的图标范例如：程序图标、dock及任务栏图标（包含系统主题切换时，任务栏黑白图标兼容处理等），直接替换即可</li>
              <li>使用vue-cli4进行开发, vue-cli-plugin-electron-builder v2.0进行编译</li>
              <li>自定义滚动条样式为类macOS风格</li>
            </ul>
          </p>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="主题">
        <themeChanger></themeChanger>
        <div class="components">
          <a-card title="Button & Link">
            <a-space>
              <a-button type="primary">
                Primary
              </a-button>
              <a-button>Default</a-button>
              <a-button type="dashed">
                Dashed
              </a-button>
              <a-button type="danger">
                Danger
              </a-button>
              <a-config-provider :auto-insert-space-in-button="false">
                <a-button type="primary">
                  按钮
                </a-button>
              </a-config-provider>
              <a-button type="primary">
                按钮
              </a-button>
              <a-button type="link">
                Link
              </a-button>
            </a-space>
          </a-card>
          <a-card title="Breadcrumb">
            <a-space>
              <a-breadcrumb>
                <a-breadcrumb-item>Home</a-breadcrumb-item>
                <a-breadcrumb-item
                  ><a href="">Application Center</a></a-breadcrumb-item
                >
                <a-breadcrumb-item
                  ><a href="">Application List</a></a-breadcrumb-item
                >
                <a-breadcrumb-item>An Application</a-breadcrumb-item>
              </a-breadcrumb>
            </a-space>
          </a-card>
          <a-card title="Dropdown">
            <a-space>
              <a-dropdown>
                <a-menu slot="overlay" @click="handleMenuClick">
                  <a-menu-item key="1">
                    <a-icon type="user" />1st menu item
                  </a-menu-item>
                  <a-menu-item key="2">
                    <a-icon type="user" />2nd menu item
                  </a-menu-item>
                  <a-menu-item key="3">
                    <a-icon type="user" />3rd item
                  </a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px">
                  Button <a-icon type="down" />
                </a-button>
              </a-dropdown>
              <a-dropdown-button @click="handleButtonClick">
                Dropdown
                <a-menu slot="overlay" @click="handleMenuClick">
                  <a-menu-item key="1">
                    <a-icon type="user" />1st menu item
                  </a-menu-item>
                  <a-menu-item key="2">
                    <a-icon type="user" />2nd menu item
                  </a-menu-item>
                  <a-menu-item key="3">
                    <a-icon type="user" />3rd item
                  </a-menu-item>
                </a-menu>
              </a-dropdown-button>
              <a-dropdown-button>
                Dropdown
                <a-menu slot="overlay" @click="handleMenuClick">
                  <a-menu-item key="1">
                    <a-icon type="user" />1st menu item
                  </a-menu-item>
                  <a-menu-item key="2">
                    <a-icon type="user" />2nd menu item
                  </a-menu-item>
                  <a-menu-item key="3">
                    <a-icon type="user" />3rd item
                  </a-menu-item>
                </a-menu>
                <a-icon slot="icon" type="user" />
              </a-dropdown-button>

              <a-dropdown-button
                disabled
                style="margin-left: 8px"
                @click="handleButtonClick"
              >
                Dropdown
                <a-menu slot="overlay" @click="handleMenuClick">
                  <a-menu-item key="1">
                    <a-icon type="user" />1st menu item
                  </a-menu-item>
                  <a-menu-item key="2">
                    <a-icon type="user" />2nd menu item
                  </a-menu-item>
                  <a-menu-item key="3">
                    <a-icon type="user" />3rd item
                  </a-menu-item>
                </a-menu>
              </a-dropdown-button>
            </a-space>
          </a-card>
          <a-card title="Pagination">
            <a-pagination :default-current="6" :total="500" />
          </a-card>
          <a-card title="Collapse">
            <a-collapse v-model="activeKey">
              <a-collapse-panel key="1" header="This is panel header 1">
                <p>{{ text }}</p>
              </a-collapse-panel>
              <a-collapse-panel
                key="2"
                header="This is panel header 2"
                :disabled="false"
              >
                <p>{{ text }}</p>
              </a-collapse-panel>
              <a-collapse-panel
                key="3"
                header="This is panel header 3"
                disabled
              >
                <p>{{ text }}</p>
              </a-collapse-panel>
            </a-collapse>
          </a-card>
          <a-card title="Steps">
            <a-steps :current="1">
              <a-step>
                <!-- <span slot="title">Finished</span> -->
                <template slot="title">
                  Finished
                </template>
                <span slot="description">This is a description.</span>
              </a-step>
              <a-step
                title="In Progress"
                sub-title="Left 00:00:08"
                description="This is a description."
              />
              <a-step title="Waiting" description="This is a description." />
            </a-steps>
          </a-card>
          <a-card title="Message">
            <a-space>
              <a-button type="primary" @click="success">
                Success
              </a-button>
              <a-button type="danger" @click="error">
                Error
              </a-button>
              <a-button @click="warning">
                Warning
              </a-button>
              <a-button type="primary" @click="showModal"> Open Modal </a-button
              ><a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
              </a-modal>
              <a-button type="primary" @click="openNotification">
                Open the notification box
              </a-button>
            </a-space>
          </a-card>
          <a-card type="Input">
            <div>
    <div style="margin-bottom: 16px">
      <a-input addon-before="Http://" addon-after=".com" default-value="mysite" />
    </div>
    <div style="margin-bottom: 16px">
      <a-input default-value="mysite">
        <a-select slot="addonBefore" default-value="Http://" style="width: 90px">
          <a-select-option value="Http://">
            Http://
          </a-select-option>
          <a-select-option value="Https://">
            Https://
          </a-select-option>
        </a-select>
        <a-select slot="addonAfter" default-value=".com" style="width: 80px">
          <a-select-option value=".com">
            .com
          </a-select-option>
          <a-select-option value=".jp">
            .jp
          </a-select-option>
          <a-select-option value=".cn">
            .cn
          </a-select-option>
          <a-select-option value=".org">
            .org
          </a-select-option>
        </a-select>
      </a-input>
    </div>
    <div style="margin-bottom: 16px">
      <a-input default-value="mysite">
        <a-icon slot="addonAfter" type="setting" />
      </a-input>
    </div>
  </div>
          </a-card>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import themeChanger from "@/components/themechanger.vue";
export default {
  name: "Mainpage",
  data() {
    return {
      text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
      activeKey: ["1"],
      visible: false,
    };
  },
  mounted(){
  },
  props: {
    msg: String,
  },
  watch: {
    activeKey(key) {
      console.log(key);
    },
  },
  methods: {
    handleButtonClick(e) {
      console.log("click left button", e);
    },
    handleMenuClick(e) {
      console.log("click", e);
    },
    success() {
      this.$message.success("This is a success message");
    },
    error() {
      this.$message.error("This is an error message");
    },
    warning() {
      this.$message.warning("This is a warning message");
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
    openNotification() {
      this.$notification.open({
        message: "Notification Title",
        description:
          "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
        onClick: () => {
          console.log("Notification Clicked!");
        },
      });
    },
  },
  components: {
    themeChanger,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.hello {
  width: 800px;
  margin: auto;
}
.ant-card {
  margin-bottom: 10px;
}

.components {
  text-align: left;
}
.mainc {
  text-align: left;
}
.mainc li{
  list-style: square;
  margin:4px 20px;
  font-weight: bold;
}
</style>
